<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>  
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="shop">
    <meta name="author" content="letsun">

    <title>中奖记录</title>
    <%@ include file="../init.jsp" %>
    <script src="${resources}/js/jqPaginator.min.js"></script>
    <style>

    .page-content {
    position: relative;
    }
    #nav {
        background-color: #DE2425;
    }

    #nav .logo .fore1 {
        background: url(${resources}/images/1_1.png) center no-repeat;
        width: 320px;
        background-size: 85%;
    }
    .minh500 {
        min-height: 500px;
    }
    .mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    text-align: center;
    padding-top: 50%;
    font-size: 40px;
    }
    .wining-table {
        width: 100%;
    }
    .wining-table thead tr,.wining-table tbody tr {
        height: 40px;
        border-bottom: 1px solid #ddd;
    }
    .wining-table thead tr th {
        background-color: #DE2425;
        color: #fff;
        text-align: center;
        font-size: 18px;
        font-weight: normal;
    }
    .wining-table tbody tr td {
        text-align: center;
        font-size: 16px;
    }
    .wining-table tbody tr td a {
        text-decoration: none;
        color: inherit;
    }
    .wining-table tbody tr td a:active,.wining-table tbody tr td a:link,.wining-table tbody tr td a:hover{
        text-decoration: none;
        color: inherit;
    }



    #notdata{
        display: none;
        text-align: center;
        padding-bottom: 100px;
        background-color: #fff;
    }
    #notdata img{
        margin-top: 100px;
        width:150px;
    }
    #notdata p{
        color: #E6E6E6;
        font-size:18px;
        height:40px;
        line-height:40px;
    }

    .pageBtn {
        position: absolute;
        bottom: 45px;
        border: 1px solid #ccc;
        border-radius: 5px;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    .pageBtn li {
        width: 40px;
        height: 40px;
        float: left;
        border-right: 1px solid #ccc;
        text-align: center;
        line-height: 40px;
        list-style: none;
    }

    .pageBtn li:last-child {
        border: none;
    }

    .pageBtn .prev, .pageBtn .next {
        width: 60px;
    }

    .pageBtn .active {
        background-color: #2196F3;
        color: #fff;
    }
   	 #operate{
		text-align: right;
		height:30px;
		line-height:30px;
		margin-bottom: 10px;
	}
	#lottery{
		min-width: 80px;
		float: right;
		border: 1px solid #eee;
		outline: none;
		height: 30px;
		margin-left: 10px;
	}
    </style>
     <script src="${resources}/js/moment.js"></script>
</head>

<body>
<%@ include file ="../header_1.jsp" %>
<div class="container">
    <div class="row">
        <div class="col-md-1">
            <%@ include file="../menu.jsp" %>
        </div>
        <div class="col-md-11">

            <div class="mask">
                <span style="margin:auto;">
                    <i class="fa fa-spinner fa-spin"></i>
                </span>
            </div>
            <!-- page-content -->
            <div class="page-content">
                <div class="page-comm minh500">
                			<div id="operate">
                			    请选择活动
	                    		<select id="lottery">
	                    			<option value='-1'>请选择活动</option>
									<c:forEach items="${activityList}" var="lottery">
										<option value="${ lottery.id}">${lottery.name}</option>
									</c:forEach>
	                    		</select>
                			</div>
                    <div id="pageCon">
                    </div>
                    <div id="notdata">
                        <img src="${resources}/images/10_3.png" alt="">
                        <p>亲，你还没有抽过奖</p>
                    </div>
                </div>
            </div>
            <!-- /.page-content -->


            <form id="validation-form" method="get" action="http://192.168.1.42:8888/shop-pc/manage/order/create">

            </form>
        </div>
    </div>
</div>

<%@ include file ="../footer.jsp" %>
<script>
var selData = ({
		pageNumber : 1,
		pageSize:8
	})
    function paging(cfg) {
        var paginator = $("#pageCon");

        paginator.jqPaginator({
            totalCounts: 500,//总条目数
            pageSize: 8,//每一页显示的条目数
            visiblePages: 5,//分多少页
            currentPage: 1,//当前页数
            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            wrapper: '<ul class="pageBtn"></ul>',
            //页面加载和点击页码时请求数据
            onPageChange: function (num) {
            	selData.pageNumber= num;
                $.get(cfg.url, selData, function (res) {
                 if (res.msg == 0) {
                	  notdata();
               		  return;
                 }
                 if(res.code=="111"){
                	 notdata();
                	 return;  
                 }
                 var html = "";
                 //重新配置分页的总条目数
                 var count = -(res.msg) * (-1);
                 paginator.jqPaginator('option', {
                 totalCounts: count
                 });
             /*   	 var activity = '${activityList}';
               	 if(activity.length>0){
	               	 html += ' <select>';
	               	 html += ' <option value="0"  selected>请选择</option>';
	               	 for (var i = 0; i < activity.length; i++) {
	               	   	 html += ' <option value="'+activity[i].id+'">'+activity[i].name+'</option>';
					 }
	               	 html += ' </select>';
               	 }else{ 
               		notdata();
               	 }  */     
               	 html += '<table class="wining-table">';
                 html += '<thead>';
                 html += '<tr>';
                 html += '<th width="50%">时间</th>';
                 html += '<th width="50%">结果</th>';
                 html += '</tr>';
                 html += '</thead>';
                 html += '<tbody>';
                 for (var i = 0; i < res.result.length; i++) {
                	 var record = res.result[i];
                	 var ns = moment(record.createTime).format('YYYY-mm-DD  hh:mm:ss');
                     html += '<tr>';
                     html += '<td><a href="javacsript:">'+ns+'</a></td>';
                     if(record.status== 1){
	                     html += '<td><a href="javacsript:">参与奖</a></td>';
                     }else if(record.status==2){
	                     html += '<td><a href="javacsript:">'+record.prize.name+'</a></td>';
                     }else{
	                     html += '<td><a href="javacsript:">已领取</a></td>';
                     }
                     html += '</tr>';
               	   }
                   html += '</tbody>';
                   html += '</table>';
               	    $("#pageCon").append(html);
                 });
            }
        });
    }
    paging({url: "${path}/manage/myCenter/myRecordData/-1"});
    function notdata() {
        $(".page-comm tbody").empty();
        $("#notdata").show();
    }
    
     $("#lottery").on("change", function () {
     	var l_id = $(this).val();
  		paging({url: "${path}/manage/myCenter/myRecordData/"+l_id}); 
     })
</script>
</body>
</html>